<template>
  <div>
    <div class="About">
      <div class="content">
        <div class="content-top">
          <p class="join-title">加入我们</p>
          <p class="join-title2">
            如果你也向往舞台，不甘平庸；
            <br />
            如果你还在单打独斗，还是散兵游勇；
            <br />
            如果你也相信团队的力量，给自己一次机会，加入我们，蜕变从这开始。
            <br />
            Ting域，听到更好的…
          </p>
          <p class="join-title2">希望你：</p>
          <div class="join-content">
            <p class="join-title3">一、常驻北京</p>
            <p class="join-title3">二、标准的普通话</p>
            <p class="join-title3">三、良好的个人形象</p>
            <p class="join-title3">四、播音主持相关专业优先</p>
          </div>
          <div>
            <hr />
          </div>
        </div>
        <div class="our-bottom">
          <p class="title">我们的优势</p>
          <i>─────</i>
          <div class="serve-background-left1">
            <img src="../assets/image/kg1111.png" alt="" />
            <img src="../assets/image/椭圆 1.png" alt="" class="round1" />
            <p>
              <span>和谐</span><br />
              <span class="desc"> 和谐的氛围！</span>
            </p>
          </div>
          <div class="serve-background-right1">
            <img src="../assets/image/bk_2222.png" alt="" />
            <img src="../assets/image/椭圆 1 拷贝.png" alt="" class="round1" />
            <p>
              <span>资源</span><br />
              <span class="desc"> 优质的资源！</span>
            </p>
          </div>
          <div class="serve-background-left2">
            <img src="../assets/image/kg1111.png" alt="" />
            <img
              src="../assets/image/椭圆 1 拷贝 2.png"
              alt=""
              class="round1"
            />
            <p>
              <span>超值</span><br />
              <span class="desc">超低的管理费！</span>
            </p>
          </div>
          <div class="serve-background-right2">
            <img src="../assets/image/bk_2222.png" alt="" />
            <img
              src="../assets/image/椭圆 1 拷贝 3.png"
              alt=""
              class="round1"
            />
            <p>
              <span>提升</span><br />
              <span class="desc-three">一线顾问指导！ 完善的晋级制度！</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <ApplyFor/>
  </div>
</template>

<script>
import ApplyFor from '../components/ApplyFor/ApplyFor'
export default {
  name: "JoinUs",
  components:{
    ApplyFor,
  },
};
</script>

<style scoped lang="less">
.content {
  width: 1000px;
  margin: 0 auto;
  text-align: center;
  p {
    font-size: 36px;
    margin-top: 65px;
    margin-bottom: 0;
  }

  .content-top {
    margin-bottom: 50px;
    .join-title {
      text-align: left;
    }
    .join-title2 {
      font-size: 16px;
      text-align: left;
      margin-top: 10px;
    }
    .join-title3 {
      text-align: left;
      margin-top: 10px;
      font-size: 16px;
    }
  }
  .our-bottom {
    background-image: url("../assets/image/bg.png");
    width: 1000px;
    height: 745px;
    overflow: hidden;
    margin: 0 auto;
    .title {
      color: #fff;
    }
    i {
      color: #fff;
    }
    span {
      font-size: 40px;
      font-weight: 600;
    }
    .desc{
      line-height: 125px;
    }
    .desc-three{
    
      line-height: 59px;
    }
    .serve-background-left1 {
      position: relative;
      img {
        float: left;
        margin-top: 50px;
      }
      .round1 {
        position: absolute;
        left: 6px;
        top: 48px;
      }
      p {
        width: 300px;
        text-align: left;
        line-height: 30px;
        position: absolute;
        left: 170px;
        top: 6px;
      }
    }
    .serve-background-right1 {
      position: relative;
      img {
        float: right;
        margin-top: 50px;
      }
      .round1 {
        position: absolute;
        right: 6px;
        top: 48px;
      }
      p {
        width: 300px;
        text-align: left;
        line-height: 30px;
        position: absolute;
        right: 160px;
        top: 6px;
      }
    }
    .serve-background-left2 {
      position: relative;
      img {
        float: left;
        margin-top: 50px;
      }
      .round1 {
        position: absolute;
        left: 6px;
        top: 332px;
      }
      p {
        width: 300px;
        text-align: left;
        line-height: 30px;
        position: absolute;
        left: 165px;
        top: 288px;
      }
    }
    .serve-background-right2 {
      position: relative;
      img {
        float: right;
        margin-top: 50px;
      }
      .round1 {
        position: absolute;
        right: 6px;
        top: 332px;
      }
      p {
        width: 300px;
        text-align: left;
        line-height: 30px;
        position: absolute;
        right: 160px;
        top: 288px;
      }
    }
  }
}
</style>